<!--  -->
<template>
  <div class="container">
    <div class="img"><img :src="Detail.cover" alt=""></div>
    <div class="movie-info-right">
      <div class="title">{{Detail.name}}</div>
      <div class="class">{{Detail.typeName}}</div>
      <div class="like-container"><div><img src="@/assets/img/dislike.png" alt="" class="like">109</div><div><img src="@/assets/img/like.png" alt="" style="margin-left:0.1rem;" class="like">104</div><div style="margin-left:0.75rem">10人评分</div></div>
      <div class="score"><div>上影评分&nbsp;{{Detail.tuiScore.toFixed(1)}}</div><div>豆瓣评分{{Detail.doubanScore}}</div></div>
      <div class="three-party">第三方平台&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="@/assets/img/right.png" alt="" @click="toBottom"></div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  data () {
    return {
    };
  },

  components: {},

  computed: {
    ...mapState({
            Detail:(state)=>state.Detail.Detail
        })
  },

  mounted(){
    this.$store.dispatch('detail')
    setTimeout(() => {
      console.log("home",this.Detail.name);
    }, 1000);
    
  },

  methods: {
    toBottom(){
      window.scrollTo(0,50000);
    }
  }
}

</script>
<style lang='less' scoped>

.container{
  margin-left:0.43rem;
  margin-top: 0.36rem;
  .movie-info-right{
      padding-left: 2.7rem;
      img{
          width: 0.4rem;
          vertical-align: top;
        }
      .title{
        font-size: 0.44rem;
        color: #000000;
      }
        .class{
          font-size: 0.24rem;
          margin-top: 0.14rem;
        }
        .like-container{
          font-size: 0.24rem;
          margin-top: 0.14rem;
          div{
            display: inline-block;
          }
          .like{
          width: 0.27rem;
          vertical-align: -0.0375rem;
          margin-right: 0.1rem;
          }
        }
        .score{
          margin-top: 0.40rem;
          font-size: 0.24rem;
          div{
            display: inline-block;
          }
          div:nth-child(2){
            margin-left:0.5rem;
            color:#A0A0A0
          }
        }
        .three-party{
          font-size: 0.24rem;
          margin-top: 0.19rem;
          img{
            vertical-align: -0.02rem;
            width: 0.36rem;
          }
        }
}
  .img{
      width: 1.96rem;
      background: #eee;
      float: left;
      border: solid rgba(191,191,191,1) 0.01rem;
      img{
        width: 100%;
        height: 100%;
      }
  }
}
</style>